<template>
    <basic-container>
        <el-tabs v-model="tabActiveName" @tab-click="handleClick">
            <el-tab-pane label="融创员工审核" name="first">
                <avue-crud :option="option"
                           :data="data"
                           ref="crud"
                           v-model="form"
                           :table-loading="loading"
                           :permission="permissionList"
                           :page="page"
                           @refresh-change="refreshChange"
                           @search-change="searchChange"
                           @search-reset="searchReset"
                           @current-change="currentChange"
                           @size-change="sizeChange"
                           @on-load="onLoad"
                >
                    <!-- 自定义添加搜索条件  按日期搜索  -->
                    <template slot="search">
                        <el-col :span="12">
                            <el-form-item label="审核操作时间" label-width="100px" style="display: inline-block;width: 50%;">
                                <el-date-picker placeholder="开始时间" @change="getTime" value-format="yyyy-MM-dd"
                                                v-model="beginOperationTime" type="date" size="small">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="至" 　label-width="40px" style="display: inline-block;width: 50%;">
                                <el-date-picker placeholder="结束日期" @change="getTime" value-format="yyyy-MM-dd"
                                                v-model="endOperationTime" type="date" size="small">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12" style="display: flex;">
                            <el-form-item label="区域" label-width="80px" style="display: inline-block;">
                                <el-select size="small" v-model="rareaId" placeholder="区域"
                                           @change="changeAreaForRongChuang(rareaId,3)">
                                    <el-option v-for="item in rareas" :key="item.id" :label="item.name"
                                               :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item 　label-width="10px" style="display: inline-block;">
                                <el-select size="small" v-model="rcityId" placeholder="城市"
                                           @change="changeAreaForRongChuang(rcityId,4)">
                                    <el-option v-for="item in rcitys" :key="item.id" :label="item.name"
                                               :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item 　label-width="10px" style="display: inline-block;">
                                <el-select size="small" v-model="projectId" placeholder="项目"
                                           @change="changeAreaForRongChuang(projectId,5)">
                                    <el-option v-for="item in projects" :key="item.id" :label="item.name"
                                               :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </template>
                    <!-- 审核按钮  -->
                    <template slot-scope="{row}"
                              slot="menu">
                        <el-button type="text"
                                   size="mini"
                                   v-if="row.status==0"
                                   @click.stop="getDetail(row)"
                                   v-has="'/mall-cloud-system/groupLeader/auditGroupLeader'">审核
                        </el-button>

                        <el-button type="text"
                                   size="mini"
                                   v-if="row.status==-1 || row.status==1"
                                   @click.stop="getDetail(row)" v-has="'/mall-cloud-system/groupLeader/detail'">查看
                        </el-button>
                    </template>
                </avue-crud>
            </el-tab-pane>
            <el-tab-pane label="带货达人审核" name="second">
                <avue-crud :option="option2"
                           :data="data2"
                           ref="crud2"
                           v-model="form2"
                           :table-loading="loading2"
                           :permission="permissionList"
                           :page="page2"
                           @refresh-change="refreshChange2"
                           @search-change="searchChange2"
                           @search-reset="searchReset2"
                           @current-change="currentChange2"
                           @size-change="sizeChange2"
                           @on-load="onLoad2"
                >
                    <!-- 自定义添加搜索条件  按日期搜索  -->
                    <template slot="search">
                        <el-col :span="12">
                            <el-form-item label="审核操作时间" label-width="100px" style="display: inline-block;width: 50%;">
                                <el-date-picker placeholder="开始时间" @change="getTime" value-format="yyyy-MM-dd"
                                                v-model="beginOperationTime" type="date" size="small">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="至" 　label-width="40px" style="display: inline-block;width: 50%;">
                                <el-date-picker placeholder="结束日期" @change="getTime" value-format="yyyy-MM-dd"
                                                v-model="endOperationTime" type="date" size="small">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="地区" label-width="80px" style="display: inline-block;width: 50%;">
                                <el-select size="small" v-model="areaId" placeholder="省份" @change="changeArea">
                                    <el-option v-for="item in areas" :key="item.id" :label="item.area_name"
                                               :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item 　label-width="40px" style="display: inline-block;width: 50%;">
                                <el-select size="small" v-model="cityId" placeholder="城市">
                                    <el-option v-for="item in citys" :key="item.id" :label="item.area_name"
                                               :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </template>
                    <!-- 审核按钮  -->
                    <template slot-scope="{row}"
                              slot="menu">
                        <el-button type="text"
                                   size="mini"
                                   v-if="row.status==0"
                                   @click.stop="getDetail(row)"
                                   v-has="'/mall-cloud-system/groupLeader/auditGroupLeader'">审核
                        </el-button>

                        <el-button type="text"
                                   size="mini"
                                   v-if="row.status==-1 || row.status==1"
                                   @click.stop="getDetail(row)" v-has="'/mall-cloud-system/groupLeader/detail'">查看
                        </el-button>
                    </template>
                </avue-crud>
            </el-tab-pane>
        </el-tabs>

        <el-drawer title="团长注册详情" :visible.sync="dialogTableVisible" v-if="dialogTableVisible" size="70%">

            <avue-form ref="obj"
                       v-model="obj"
                       :option="optionView">
                <template slot-scope="scope" slot="wxAvtar">
                    <el-image
                            style="width: 60px; height: 60px;border-radius:60px;"
                            :src="obj.wxAvtar"
                            fit="cover"></el-image>
                </template>
                <template slot="menuForm">
                    <el-button type="primary" size="mini" v-if="obj.newStatus==0" :loading="loadBtn"
                               @click="commitCheck(obj.id,obj.status,obj.refuseReason)"
                               v-has="'/mall-cloud-system/groupLeader/auditGroupLeader'">提 交
                    </el-button>
                    <el-button size="mini" @click="cancel(obj.newStatus)">取 消</el-button>
                </template>
            </avue-form>
        </el-drawer>

    </basic-container>
</template>

<script>
    import {
        getList,
        getDetail,
        auditGroupLeader
    } from "@/api/base/member/groupLeaderMgr";
    import {
        getAreaListByLevel,
        getOrganizationListByLevel
    } from "@/api/admin/area";
    import {mapGetters} from "vuex";

    var Dict = JSON.parse(localStorage.getItem('mall-dictionary')).content;
    var CHECKDIC = [
        {
            label: '审核拒绝',
            value: -1,
        }, {
            label: '审核通过',
            value: 1,
        }]

    var WITH_STATUS = [
        {
            label: '待审核',
            value: 0,
        }, {
            label: '审核通过',
            value: 1,
        }, {
            label: '审核拒绝',
            value: -1,
        }
    ]
    export default {
        data() {
            return {
                currentTab: 'first',
                tabActiveName: 'first', //tab页切换
                beginOperationTime: '',
                endOperationTime: '',
                areaId: null,
                cityId: null,
                rareaId: null,
                rcityId: null,
                projectId: null,
                area: '',
                city: '',
                project: '',
                areas: [],
                citys: [],
                projects: [],
                rareas: [],
                rcitys: [],
                loadBtn: false,
                deleteList: [], //全选的删除
                form: {},
                form2: {},
                obj: {},
                arroyAllDict: {},
                query: {},
                query2: {},
                loading: true,
                loading2: true,
                rolesTree: [],
                rolesKeys: [],
                box: false,
                dialogTableVisible: false,
                page: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0
                },
                page2: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0
                },
                option: {
                    //title:'提现申请记录',
                    align: 'center',
                    size: 'mini',
                    tip: false,
                    border: true,
                    index: false,
                    selection: false,
                    viewBtn: false,
                    delBtn: false,
                    addBtn: false,
                    editBtn: false,
                    rowKey: 'id',
                    height: 'auto',
                    // calcHeight: 380,
                    menuWidth: 100,
                    searchMenuSpan: 6,
                    column: [
                        {
                            label: "姓名",
                            prop: "name",
                            search: true,
                            row: true,
                        },
                        {
                            label: "唯一识别码",
                            prop: "userId",
                            row: true,
                            width: 160,
                            searchLabelWidth: 120,
                            search: true,
                        },
                        {
                            label: "城市",
                            prop: "city",
                            row: true,
                            hide: false,
                            search: false,
                        },
                        //暂时隐藏掉
                        // {
                        //     label: "服务费",
                        //     prop: "serviceAmount",
                        //     fixed: true,
                        // },
                        {
                            label: "项目",
                            prop: "project",
                            row: true,
                        },
                        {
                            label: "工号",
                            prop: "jobNumber",
                            search: true,
                            row: true,
                        },
                        {
                            label: "状态",
                            prop: "status",
                            row: true,
                            search: true,
                            type: 'select',
                            width: 100,
                            dicData: WITH_STATUS,
                        },
                        {
                            label: "审核人",
                            prop: "auditUser",
                            row: true,
                        },
                        {
                            label: "审核时间",
                            prop: "auditTime",
                            row: true,
                        },

                    ]
                },
                option2: {
                    //title:'提现申请记录',
                    align: 'center',
                    size: 'mini',
                    tip: false,
                    border: true,
                    index: false,
                    selection: false,
                    viewBtn: false,
                    delBtn: false,
                    addBtn: false,
                    editBtn: false,
                    rowKey: 'id',
                    // height: 'auto',
                    // calcHeight: 380,
                    menuWidth: 100,
                    searchMenuSpan: 6,
                    column: [
                        {
                            label: "姓名",
                            prop: "name",
                            row: true,
                            search: true,
                        },
                        {
                            label: "唯一识别码",
                            prop: "id",
                            row: true,
                            searchLabelWidth: 100,
                            search: true,
                        },
                        {
                            label: "地区",
                            prop: "address",
                            row: true,
                            hide: false,
                            // width: 70
                        },
                        {
                            label: "状态",
                            prop: "status",
                            row: true,
                            search: true,
                            type: 'select',
                            width: 100,
                            dicData: WITH_STATUS,
                        },
                        {
                            label: "审核人",
                            prop: "auditUser",
                            row: true,
                        },
                        {
                            label: "审核时间",
                            row: true,
                            prop: "auditTime",
                        },

                    ],
                },
                optionView: {
                    size: "samll",
                    mock: false,
                    submitBtn: false,
                    emptyBtn: false,
                    menuPostion: 'center',
                    labelWidth: '100',
                    group: [
                        {
                            label: '基本信息',
                            prop: 'group0',
                            column: [
                                {
                                    label: "头像",
                                    prop: "wxAvtar",
                                    fixed: true,
                                    disabled: true,
                                    formslot: true,
                                    display: true,
                                }, {
                                    label: "微信昵称",
                                    prop: "wxNickname",
                                    fixed: true,
                                    disabled: true,
                                    display: true,
                                },
                                {
                                    label: "姓名",
                                    prop: "name",
                                    fixed: true,
                                    disabled: true,
                                    display: true,
                                }, {
                                    label: "身份证号",
                                    prop: "idCard",
                                    fixed: true,
                                    disabled: true,
                                    display: true,
                                },
                                {
                                    label: "联系电话",
                                    prop: "mobile",
                                    fixed: true,
                                    disabled: true,
                                    display: true,
                                },
                                {
                                    label: "微信号",
                                    prop: "wxNumber",
                                    fixed: true,
                                    disabled: true,
                                },
                                {
                                    label: "工号",
                                    prop: "jobNumber",
                                    fixed: true,
                                    disabled: true,

                                },

                                {
                                    label: "区域",
                                    prop: "area",
                                    fixed: true,
                                    disabled: true,
                                    display: true,
                                },
                                {
                                    label: "城市",
                                    prop: "city",
                                    fixed: true,
                                    disabled: true,
                                    display: true,
                                },
                                {
                                    label: "项目",
                                    prop: "project",
                                    disabled: true,
                                    fixed: true,
                                    display: true,
                                },
                                {
                                    label: "地址",
                                    prop: "address",
                                    disabled: true,
                                    fixed: true,
                                    display: true,
                                },
                                {
                                    label: "详细地址",
                                    prop: "areaInfo",
                                    disabled: true,
                                    fixed: true,
                                    display: true,
                                },
                                {
                                    label: "邀请人手机号",
                                    prop: "inviterMobile",
                                    disabled: true,
                                    fixed: true,
                                    display: true,
                                },

                                {
                                    label: "拒绝原因",
                                    prop: "refuseReason",
                                    type: 'textarea',
                                    disabled: true,
                                    fixed: true,
                                    value: false,
                                    display: false,
                                },
                            ]
                        },
                        {
                            label: '审核',
                            prop: 'group1',
                            column: [
                                {
                                    label: "审核",
                                    prop: "status",
                                    type: 'radio',
                                    row: true,
                                    display: true,
                                    dicData: CHECKDIC,
                                    rules: [{
                                        required: true,
                                        message: "请选择审核选项",
                                        trigger: "blur"
                                    }],
                                },
                                {
                                    label: "拒绝原因",
                                    prop: "refuseReason",
                                    type: 'textarea',
                                    display: false,
                                    fixed: true,
                                    value: false,
                                    rules: [{
                                        required: true,
                                        message: "请输入拒绝原因",
                                        trigger: "blur"
                                    }]
                                }
                            ]
                        }
                    ],

                },
                data: [],
                data2: []
            };
        },
        watch: {
            'obj.status'() {
                if (this.obj.status == -1) {
                    this.optionView.group[1].column[1].display = true
                } else {
                    this.optionView.group[1].column[1].display = false
                }
            },
        },
        computed: {
            ...mapGetters(["permission", 'userInfo']),
            permissionList() {
                return {
                    editBtn: this.vaildData(this.permission["/mall-cloud-account/withDrawRecord/editItem"], false)
                };
            },
        },
        methods: {
            //选择地区
            changeArea() {
                //省级选择框
                getAreaListByLevel(this.areaId, 1).then(res => {
                    this.cityId = "";
                    this.citys = res.data.data;
                    console.log(this.citys)
                })
            },
            //选择项目
            changeAreaForRongChuang(parentId, lev) {
                //省级选择框

                if (lev == 3) {//区域
                    getOrganizationListByLevel(parentId, lev).then(res => {
                        if (lev == 3) {
                            this.rcityId = "";
                            this.projectId = "";
                            this.rcitys = res.data.data;
                        }
                    })
                    for (let item of this.rareas) {
                        if (item.id == parentId) {
                            this.area = item.name
                        }
                    }
                }
                if (lev == 4) {//城市
                    getOrganizationListByLevel(parentId, lev).then(res => {
                        if (lev == 4) {
                            this.projects = res.data.data;
                        }
                    })
                    for (let item of this.rcitys) {
                        if (item.id == parentId) {
                            this.city = item.name
                        }
                    }
                }
                if (lev == 5) {
                    for (let item of this.projects) {
                        if (item.id == parentId) {
                            this.project = item.name
                        }
                    }
                }
            },
            handleClick(tab) {
                console.log(tab)
                if (tab.name == "first") {
                    this.page.currentPage = 1
                    this.$refs['crud'].searchReset();
                    this.currentTab = "first";
                    this.onLoad(this.page);
                } else if (tab.name == "second") {
                    this.page2.currentPage = 1
                    this.$refs['crud2'].searchReset();
                    this.onLoad2(this.page2);
                    this.currentTab = "second";
                }
            },
            getTime() {
                if (this.beginOperationTime > this.endOperationTime) {
                    this.$message({
                        type: "error",
                        message: "结束时间不能小于开始时间"
                    });
                    this.endOperationTime = ''
                }
            },


            searchReset() {
                this.query = {};
                this.beginOperationTime = ''
                this.endOperationTime = ''
                this.areaId = ''
                this.cityId = ''
                this.rareaId = ''
                this.rcityId = ''
                this.projectId = ''
                this.area = ''
                this.city = ''
                this.project = ''
                this.onLoad(this.page);
            },
            searchChange(params, done) {
                this.page.currentPage = 1
                params.beginOperationTime = this.beginOperationTime
                params.endOperationTime = this.endOperationTime
                params.area = this.area
                params.city = this.city
                params.project = this.project
                console.log(params)
                this.onLoad(this.page, params, done);
            },
            currentChange(currentPage) {
                this.page.currentPage = currentPage;
            },
            sizeChange(pageSize) {
                this.page.pageSize = pageSize;
            },
            refreshChange() {
                this.onLoad(this.page);
            },
            onLoad(page, params = {}, done) {
                this.loading = true;
                params.type = 1; //店铺申请记录
                getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
                    if (done) {
                        done();
                    }
                    this.loading = false;
                    const data = res.data;
                    this.page.total = data.count;
                    this.data = data.data;
                });

                //省级选择框
                getAreaListByLevel(null, 0).then(res => {
                    this.areas = res.data.data;
                })
                getOrganizationListByLevel(2, 2).then(res => {
                    this.rareas = res.data.data;
                })
            },
            searchReset2() {
                this.query2 = {};
                this.beginOperationTime = ''
                this.endOperationTime = ''
                this.areaId = ''
                this.cityId = ''
                this.onLoad2(this.page2);
            },
            searchChange2(params, done) {
                let province = this.areas.filter(item=>{
                    return item.id == this.areaId
                })
                this.page2.currentPage = 1
                params.beginOperationTime = this.beginOperationTime
                params.endOperationTime = this.endOperationTime
                params.cityId = this.cityId
                params.province = province[0].area_name
                this.query2 = params;
                this.onLoad2(this.page2, params, done);
            },
            currentChange2(currentPage) {
                this.page2.currentPage = currentPage;
            },
            sizeChange2(pageSize) {
                this.page2.pageSize = pageSize;
            },
            refreshChange2() {
                this.onLoad2(this.page2);
            },
            onLoad2(page, params = {}, done) {
                this.loading2 = true;
                params.type = 2;
                getList(page.currentPage, page.pageSize, Object.assign(params, this.query2)).then(res => {
                    if (done) {
                        done();
                    }
                    this.loading2 = false;
                    const data = res.data;
                    this.page2.total = data.count;
                    this.data2 = data.data;
                });

                //省级选择框
                getAreaListByLevel(null, 0).then(res => {
                    this.areas = res.data.data;
                })
            },
            //打开审核抽屉
            //0，未处理 1，审核通过  2，审核拒绝  3，未打款  4，已完成
            getDetail(row) {
                this.loadBtn = false
                console.log(row.status, '------0000')
                if (row.status == 0) {
                    this.optionView.group[1].display = true;
                    this.optionView.group[1].column[1].display = true;
                } else {
                    this.optionView.group[1].display = false;
                    this.optionView.group[1].column[1].display = false;
                }


                if (row.status == 0) {
                    this.optionView.group[0].column[13].display = false;//审核拒绝原因
                } else if (row.status == 1) {
                    this.optionView.group[0].column[13].display = false;//审核拒绝原因
                } else if (row.status == -1) {
                    // this.optionView.group[0].column[5].display = true;//审核操作人
                    this.optionView.group[0].column[13].display = true;//审核拒绝原因
                    // this.optionView.group[0].column[8].display = false;//打款状态
                    // this.optionView.group[0].column[9].display = false;//打款人
                    // this.optionView.group[0].column[10].display = false;//打款时间
                    // this.optionView.group[0].column[11].display = false;//打款备注
                }
                if (row.type == 1) {

                    this.optionView.group[0].column[10].display = false;//审核操作人
                    this.optionView.group[0].column[11].display = false;//审核操作人
                    this.optionView.group[0].column[12].display = false;//审核拒绝原因

                    this.optionView.group[0].column[5].display = true;//审核操作人
                    this.optionView.group[0].column[6].display = true;//审核拒绝原因
                    this.optionView.group[0].column[7].display = true;//审核操作人
                    this.optionView.group[0].column[8].display = true;//审核拒绝原因
                    this.optionView.group[0].column[9].display = true;//审核操作人
                } else {
                    this.optionView.group[0].column[5].display = false;//审核操作人
                    this.optionView.group[0].column[6].display = false;//审核拒绝原因
                    this.optionView.group[0].column[7].display = false;//审核操作人
                    this.optionView.group[0].column[8].display = false;//审核拒绝原因
                    this.optionView.group[0].column[9].display = false;//审核操作人

                    this.optionView.group[0].column[10].display = true;//审核操作人
                    this.optionView.group[0].column[11].display = true;//审核操作人
                    this.optionView.group[0].column[12].display = true;//审核拒绝原因
                }
                getDetail(row.id).then(res => {
                    if (res.data.code == 200) {
                        this.obj = res.data.data;
                        this.obj.newStatus = res.data.data.status;
                        this.obj.wxAvtar = res.data.data.wxAvtar;
                        console.log(this.obj)
                        if (!this.obj.refuseReason && this.obj.status != 0) {
                            this.obj.refuseReason = '无'
                        }
                        if (this.obj.inviterMobile == "") {
                            this.obj.inviterMobile = "无"
                        }
                        if (this.obj.wxNickname == "") {
                            this.obj.wxNickname = "无"
                        }
                        this.dialogTableVisible = true;
                    } else {
                        this.$message({
                            message: res.data.message,
                            type: 'warning'
                        });
                        return;
                    }
                });
            },

            commitCheck(id, status, refuseReason) {
                this.loadBtn = true
                if (!status) {
                    this.$message.error("请点击审核选项");
                    this.loadBtn = false
                    return;
                }
                if (status == -1) {
                    if (!refuseReason) {
                        this.$message({
                            type: "error",
                            message: "审核拒绝原因不能为空"
                        });
                        this.loadBtn = false
                        return;
                    } else {
                        // var regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im
                        // var  regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im;
                        var regEn = /[`@#$%^&*()_+<>{},\/;'[\]]/im;
                        var regCn = /[#￥（——）：；“”‘|《。》？【】[\]]/im;
                        if (regEn.test(refuseReason) || regCn.test(refuseReason)) {
                            this.$message({
                                type: "error",
                                message: "拒绝不能包含特殊字符"
                            });
                            this.loadBtn = false
                            return false;
                        }

                        if (refuseReason.length > 100) {
                            this.$message({
                                type: "error",
                                message: "原因最多输入100个字符"
                            });
                            this.loadBtn = false
                            return;
                        }
                    }
                }
                auditGroupLeader(id, status, refuseReason).then(res => {
                    if (res.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        })
                        this.cancel();
                        if (this.currentTab == "first") {

                            this.onLoad(this.page, this.query);
                        } else {
                            this.onLoad2(this.page2);
                        }
                    } else {
                        this.$message({
                            type: "error",
                            message: res.data.message
                        });
                    }
                });
            },
            cancel(newStatus) {
                console.log(this.obj);
                this.dialogTableVisible = false
                this.obj.refuseReason = ''
                this.loadBtn = false
                this.obj.status = newStatus

            },

        }
    };
</script>

<style>
</style>
